<template>
	<view class="container">
		<block v-if="errmsg == '' && isload">
			<view class="contentbox-top" :style="{ background: '' + t('color1') + '' }">
				<view class="member-info">
					<view class="member-avatar">
						<image :src="userinfo.headimg"></image>
					</view>
					<view class="title">
						<view>
							{{ userinfo.nickname }} 上级:{{ userinfo.pname }}
						</view>
						您的当前{{ bgset && bgset.level_name ? bgset.level_name : '等级' }}：<text style="font-weight:bold">{{
							userlevel.name }}</text>
					</view>
				</view>

			</view>
			<!--!nolevel&& && selectedLevel.id != userinfo.leavelid-->
			<form @submit="formSubmit">
				<view class="contentbox" style="margin-top: -140rpx;"
					v-if="!has_apply && selectedLevel.can_apply == 1 && selectedLevel.applytj_reach == 1">
					<view class="apply-title">
						申请成为 [ {{ selectedLevel.name }} ]
					</view>
					<!-- style="margin-bottom: 35rpx;" -->
					<view class="applydata">
						<picker class="form-item" mode="selector" :range="aglevelList" range-key="name"
							@change="changelevel">
							<view class="picker">
								当前选择：{{ selectedLevel.name ? selectedLevel.name : selectedOption }}
							</view>
						</picker>
					</view>
					<view class="applydata" v-if="selectedLevel.applytj_reach == 1">
						<view class="form-item" v-for="(item, idx) in selectedLevel.apply_formdata" :key="item.id">
							<view class="label"><text v-if="item.val3 == 1" style="color:red"> *</text>{{ item.val1 }}:
							</view>
							<block v-if="item.key == 'input'">
								<input type="text" :name="'form' + idx" class="input" :placeholder="item.val2"
									placeholder-style="font-size:28rpx"
									:value="item.val1 == '邀请人ID' && userinfo.pid != 0 ? userinfo.pid : null" />
							</block>
							<block v-if="item.key == 'textarea'">
								<textarea :name="'form' + idx" class='textarea' :placeholder="item.val2"
									placeholder-style="font-size:28rpx" />
							</block>
							<block v-if="item.key == 'radio'">
								<radio-group class="flex" :name="'form' + idx" style="flex-wrap:wrap">
									<label v-for="(item1, idx1) in item.val2" :key="item1.id" class="flex-y-center">
										<radio class="radio" :value="item1" />{{ item1 }}
									</label>
								</radio-group>
							</block>
							<block v-if="item.key == 'checkbox'">
								<checkbox-group :name="'form' + idx" class="flex" style="flex-wrap:wrap">
									<label v-for="(item1, idx1) in item.val2" :key="item1.id" class="flex-y-center">
										<checkbox class="checkbox" :value="item1" />{{ item1 }}
									</label>
								</checkbox-group>
							</block>
							<block v-if="item.key == 'selector'">
								<picker class="picker" mode="selector" :name="'form' + idx" value="" :range="item.val2"
									@change="editorBindPickerChange" :data-idx="idx">
									<view v-if="editorFormdata[idx] || editorFormdata[idx] === 0">
										{{ item.val2[editorFormdata[idx]] }}
									</view>
									<view v-else>请选择</view>
								</picker>
							</block>
							<block v-if="item.key == 'time'">
								<picker class="picker" mode="time" :name="'form' + idx" value="" :start="item.val2[0]"
									:end="item.val2[1]" :range="item.val2" @change="editorBindPickerChange"
									:data-idx="idx">
									<view v-if="editorFormdata[idx]">{{ editorFormdata[idx] }}</view>
									<view v-else>请选择</view>
								</picker>
							</block>
							<block v-if="item.key == 'date'">
								<picker class="picker" mode="date" :name="'form' + idx" value="" :start="item.val2[0]"
									:end="item.val2[1]" :range="item.val2" @change="editorBindPickerChange"
									:data-idx="idx">
									<view v-if="editorFormdata[idx]">{{ editorFormdata[idx] }}</view>
									<view v-else>请选择</view>
								</picker>
							</block>

							<block v-if="item.key == 'region'">
								<uni-data-picker :localdata="items" popup-title="请选择省市区" @change="onchange"
									styleData="width:100%"></uni-data-picker>
								<!-- <picker class="picker" mode="region" :name="'form'+idx" value="" @change="editorBindPickerChange" :data-idx="idx">
							<view v-if="editorFormdata[idx]">{{editorFormdata[idx]}}</view> 
							<view v-else>请选择省市区</view>
						</picker> -->
								<input type="text" style="display:none" :name="'form' + idx" :value="regiondata" />
							</block>
							<block v-if="item.key == 'upload'">
								<input type="text" style="display:none" :name="'form' + idx"
									:value="editorFormdata[idx]" />
								<view class="flex" style="flex-wrap:wrap;padding-top:20rpx">
									<view class="form-imgbox" v-if="editorFormdata[idx]">
										<view class="form-imgbox-img">
											<image class="image" :src="editorFormdata[idx]" @click="previewImage"
												:data-url="editorFormdata[idx]" mode="widthFix" :data-idx="idx" />
										</view>
									</view>
									<view class="form-uploadbtn"
										:style="{ background: 'url(' + static_url + '/static/img/shaitu_icon.png) no-repeat 50rpx', backgroundSize: '80rpx 80rpx', backgroundColor: '#F3F3F3' }"
										@click="editorChooseImage" :data-idx="idx"></view>
								</view>
							</block>
						</view>
					</view>
				</view>
				<view class="contentbox"
					style="color:#eb544d;margin-top: -140rpx;height: 200rpx;text-align: center;line-height: 140rpx;font-weight: bold;"
					v-else-if="aglevelCount == 0">
					<!-- 您已经达到最高级别~ -->您当前没有可申请的等级
				</view>
				<view class="contentbox"
					style="color:#eb544d;margin-top: -140rpx;height: 200rpx;text-align: center;line-height: 140rpx;font-weight: bold;"
					v-else>
					您已经提交申请，请等待审核~
				</view>
				<button class="form-btn" form-type="submit" v-if="!has_apply && selectedLevel.applytj_reach == 1"
					:style="{ background: '' + t('color1') + '' }">立即申请</button>
				<view class="tips" v-if="selectedLevel.applytj_reach == 1">提交成功后，我们将会在1-2个工作日回复</view>
			</form>
		</block>

		<block v-if="errmsg != '' && isload">
			<view class="zan-box">
				<image src="/static/img/zan.png" class="zan-img"></image>
				<view class="zan-text">{{ errmsg }}</view>
			</view>
		</block>
		<loading v-if="loading"></loading>
		<dp-tabbar :opt="opt"></dp-tabbar>
	</view>
</template>

<script>
var app = getApp();

export default {
	data() {
		return {
			opt: {}, // 页面参数
			levelid: 0, // 当前等级ID
			loading: false, // 是否显示加载中
			isload: false, // 是否加载完成
			menuindex: -1, // 菜单索引

			pre_url: app.globalData.pre_url, static_url: app.globalData.static_url, // 图片前缀URL
			editorFormdata: [], // 表单数据
			regiondata: '', // 地区数据
			items: [], // 地区选择器的数据
			provincedata: [], // 省份数据
			citydata: [], // 城市数据
			test: 'test', // 测试数据

			sysset: [], // 系统设置
			userinfo: [], // 用户信息
			aglevelList: [], // 等级列表
			aglevelCount: 0, // 等级数量
			applytj_reach: 0, // 是否满足申请条件
			errmsg: '', // 错误信息
			userlevel: "", // 用户当前等级
			selectedLevel: "", // 用户选择的等级
			explain: "", // 等级说明
			applytj_info: "", // 申请条件信息
			autouptj_info: "", // 自动升级条件信息
			largeareaindex: -1, // 大区索引
			largearea: [], // 大区数据
			changeState: true, // 是否允许切换等级
			levelupcode: false, // 是否有升级码
			bgset: '', // 背景设置
			type: 0, // 页面类型
			ycode: '', // 邀请码
			nolevel: false, // 是否没有等级
			need_school: 0, // 是否需要学校信息
			school_id: 0, // 学校ID
			gradelist: [], // 年级列表
			gradeindex: -1, // 年级索引
			classindex: -1, // 班级索引
			classlist: [], // 班级列表
			selectedOption: '请选择', // 当前选中的选项
			has_apply: 0,//是否有审核状态
		};
	},

	// 页面加载时触发
	onLoad: function (opt) {
		this.opt = app.getopts(opt); // 获取页面参数
		if (this.opt && this.opt.levelid) {
			this.levelid = this.opt.levelid; // 设置等级ID
		}
		if (this.opt && this.opt.type) {
			this.type = this.opt.type; // 设置页面类型
		}
		var that = this;
		// 获取地区数据
		app.get('Index/getCustom', {}, function (customs) {
			var url = app.globalData.static_url + '/static/area.json';
			if (customs.data.includes('plug_zhiming')) {
				url = app.globalData.static_url + '/static/area_gaoxin.json';
			}
			uni.request({
				url: url,
				data: {},
				method: 'GET',
				header: {
					'content-type': 'application/json'
				},
				success: function (res2) {
					that.items = res2.data
					var provincedata = [];
					for (var i in res2.data) {
						provincedata.push({
							text: res2.data[i].text,
							value: res2.data[i].value
						})
					}
					that.provincedata = provincedata;
					var citydata = [];
					for (var i in res2.data) {
						var citys = [];
						for (var j in res2.data[i].children) {
							citys.push({
								text: res2.data[i].children[j].text,
								value: res2.data[i].children[j].value
							});
						}
						citydata.push({
							text: res2.data[i].text,
							value: res2.data[i].value,
							children: citys
						});
					}
					that.citydata = citydata;
				}
			});
		});

		this.getdata(); // 获取页面数据
	},

	// 下拉刷新时触发
	onPullDownRefresh: function () {
		this.getdata(true); // 重新获取数据
	},

	methods: {
		// 获取页面数据
		getdata: function () {
			var that = this;
			that.loading = true;
			app.get('My/levelup', {
				id: that.opt.id,
				cid: that.opt.cid,
				levelid: that.levelid
			}, function (res) {
				that.loading = false;
				uni.setNavigationBarTitle({
					title: that.t('会员') + '升级'
				});
				if (res.status == 0) {
					that.errmsg = res.msg; // 设置错误信息
				} else if (res.status == 2) {
					that.errmsg = res.msg;
					setTimeout(function () {
						app.goto('index'); // 跳转到首页
					}, 1000);
				} else {
					that.has_apply = res.has_apply;
					that.userinfo = res.userinfo; // 设置用户信息
					that.bankname = res.userinfo.bankname;
					that.userlevel = res.userlevel; // 设置用户当前等级
					that.selectedLevel = res.userlevel; // 设置用户选择的等级
					that.sysset = res.sysset; // 设置系统配置
					that.aglevelList = res.aglevelList.filter(i => i.can_apply == 1); // 设置等级列表
					that.aglevelCount = that.aglevelList.length; // 设置等级数量
					that.explain = res.userlevel.explain; // 设置等级说明
					console.log('this.levelid: ', that.levelid);
					console.log('this.selectedLevel.id: ', that.selectedLevel.id);
					console.log('this.nolevel: ', that.nolevel);
					console.log('this.aglevelList: ', that.aglevelList);
					console.log('this.userinfo.levelid: ', that.userinfo.levelid);
					//获取自己的等级
					that.levelid = that.userinfo.levelid
					if (res.levelupcode) {
						that.levelupcode = res.levelupcode; // 设置是否有升级码
						if (res.bgset) {
							if (res.bgset.title) {
								uni.setNavigationBarTitle({
									title: res.bgset.title // 设置页面标题
								});
							}
							that.bgset = res.bgset; // 设置背景配置
						}
					}
					if (res.largearea) that.largearea = res.largearea; // 设置大区数据

					// that.changelevel2(2) 
					if (that.levelid) {
						that.changelevel2(that.levelid) // 切换等级
					}
				}
				that.loaded(); // 标记加载完成
			});
		},

		// 表单提交事件
		formSubmit: function (e) {
			var that = this;
			var apply_formdata = this.selectedLevel.apply_formdata; // 获取表单数据
			var formdata = e.detail.value; // 获取表单提交的数据

			for (var i = 0; i < apply_formdata.length; i++) {
				// 校验必填项
				if (apply_formdata[i].val3 == 1 && (formdata['form' + i] === '' || formdata['form' + i] ===
					undefined || formdata['form' + i].length == 0)) {
					app.alert(apply_formdata[i].val1 + ' 必填'); // 提示必填项
					return;
				}
				if (apply_formdata[i].key == 'selector') {
					formdata['form' + i] = apply_formdata[i].val2[formdata['form' + i]] // 处理选择器数据
				}
			}

			if (formdata.levelid == '') {
				app.alert('请选择等级'); // 提示选择等级
				return;
			}
			if (formdata.levelid == undefined) {
				formdata.levelid = this.levelid // 设置默认等级ID
			}

			//formdata.cid = this.selectedLevel.id;
			formdata.levelid = this.selectedLevel.id;
			console.log('formdata: ', formdata);
			app.showLoading('提交中'); // 显示加载中提示
			app.post('My/levelup', formdata, function (res) {
				app.showLoading(false); // 隐藏加载中提示
				if (res.status == 0) {
					app.alert(res.msg); // 提示错误信息
					return;
				}
				app.success(res.msg); // 提示成功信息
				setTimeout(function () {
					app.goto(res.url); // 跳转到指定页面
				}, 1000);
			});
		},

		// 切换等级
		changelevel: function (e) {

			this.changeState = false;
			var levelid = e.detail.value; // 获取选择的等级ID
			var aglevelList = this.aglevelList;
			var agleveldata;

			// 根据等级ID查找对应的等级数据
			// for (var i in aglevelList) {
			// 	if (aglevelList[i].id == levelid) {
			// 		agleveldata = aglevelList[i];
			// 		break;
			// 	}
			// }

			agleveldata = this.aglevelList[e.detail.value];
			var applytj = [];
			var applytj_reach = 0;
			var member = this.userinfo;

			this.selectedLevel = agleveldata; // 设置用户选择的等级
			this.selectedOption = this.selectedLevel.name;
			this.explain = agleveldata.explain; // 设置等级说明
			this.editorFormdata = []; // 清空表单数据
			this.changeState = true;
			this.test = Math.random(); // 触发视图更新
			console.log(this.aglevelList, e.detail.value, this.selectedLevel);
		},

		// 切换等级（根据等级ID）
		changelevel2: function (levelid) {

			this.changeState = false;
			var levelid = levelid;
			var aglevelList = this.aglevelList;
			var agleveldata;

			// 根据等级ID查找对应的等级数据
			for (var i in aglevelList) {
				if (aglevelList[i].id != levelid) {
					agleveldata = aglevelList[i];
					//this.levelid = aglevelList[i].id
					//console.log(': ',this.levelid,aglevelList[i].id);	
					break;
				}
			}
			var applytj = [];
			var applytj_reach = 0;
			var member = this.userinfo;
			console.log('this.agleveldata: ', agleveldata);
			if (agleveldata) {
				this.explain = agleveldata.explain; // 设置等级说明
				this.selectedLevel = agleveldata; // 设置用户选择的等级
			} else {
				this.selectedLevel = {
					can_apply: -1,
					id: 0,
					applytj_reach: -1
				} // 设置默认等级
			}

			this.editorFormdata = []; // 清空表单数据
			this.changeState = true;

			console.log('this.aglevelList: ', this.aglevelList);
			this.test = Math.random(); // 触发视图更新
		},

		// 选择图片
		editorChooseImage: function (e) {
			var that = this;
			var idx = e.currentTarget.dataset.idx; // 获取图片索引
			var tplindex = e.currentTarget.dataset.tplindex;
			var editorFormdata = this.editorFormdata;
			if (!editorFormdata) editorFormdata = [];
			console.log('editorFormdata: ', idx);
			app.chooseImage(function (data) {
				editorFormdata[idx] = data[0]; // 设置图片路径
				console.log("editorFormdata", editorFormdata)
				console.log("editorFormdata[idx]", editorFormdata[idx])
				that.editorFormdata = editorFormdata
				that.$forceUpdate(); // 强制更新视图
				that.test = Math.random(); // 触发视图更新
			})
		},

		// 选择器值改变事件
		editorBindPickerChange: function (e) {
			var idx = e.currentTarget.dataset.idx; // 获取选择器索引
			var tplindex = e.currentTarget.dataset.tplindex;
			var val = e.detail.value; // 获取选择的值
			var editorFormdata = this.editorFormdata;
			if (!editorFormdata) editorFormdata = [];
			editorFormdata[idx] = val; // 设置选择的值
			console.log(editorFormdata)
			this.editorFormdata = editorFormdata
			this.test = Math.random(); // 触发视图更新
		},

		// 地区选择器值改变事件
		onchange(e) {
			const value = e.detail.value
			console.log(value[0].text + ',' + value[1].text + ',' + value[2].text)
			this.regiondata = value[0].text + ',' + value[1].text + ',' + value[2].text // 设置地区数据
		},

		// 大区选择器值改变事件
		largeareaBindPickerChange: function (e) {
			console.log(e.detail.value);
			this.largeareaindex = e.detail.value // 设置大区索引
		},
	}
};
</script>

<style>
page {
	background: #ededed;
	width: 100%;
	height: 100%;
}

.container {
	width: 100%;
	height: auto;
	min-height: 100%;
	padding-bottom: 20rpx;
}

.banner {
	width: 100%;
	background: #fff;
	height: 400rpx;
	display: table
}

.contentbox {
	width: 94%;
	margin: 0 3%;
	padding: 20rpx 40rpx;
	border-radius: 20rpx;
	background: #fff;
	color: #B17D2D;
	margin-bottom: 30rpx;
	display: flex;
	flex-direction: column;
	margin-bottom: 10px
}

.contentbox-top {
	padding: 0rpx 40rpx;
	background: #fff;
	color: #fff;
	display: flex;
	flex-direction: column;
	height: 400rpx;
}

.title {
	height: 50rpx;
	line-height: 50rpx
}

.user-level {
	margin-left: 10rpx;
	display: flex;
}

.user-level image {
	width: 44rpx;
	height: 44rpx;
	margin-right: 10rpx;
	margin-left: -4rpx;
}

.level-name {
	height: 36rpx;
	border-radius: 18rpx;
	font-size: 24rpx;
	color: #fff;
	background-color: #5c5652;
	padding: 0 16rpx 0 0;
	display: flex;
	align-items: flex-end;
}

.level-name .name {
	display: flex;
	align-items: center;
	height: 100%
}

.noup {
	width: 100%;
	text-align: center;
	font-size: 32rpx;
	color: #ffc600
}

.form-item1 {
	width: 100%;
	display: flex;
	flex-direction: column;
	color: #333
}

.form-item1 .panel {
	width: 100%;
	font-size: 32rpx;
	color: #B17D2D;
}

.form-item1 radio-group {
	width: 100%;
	background: #fff;
	padding-left: 10rpx;
}

.form-item1 .radio-item {
	display: flex;
	width: 100%;
	color: #000;
	align-items: center;
	background: #fff;
	padding: 12rpx 0;
}

.form-item1 .radio-item:last-child {
	border: 0
}

.radio-item .user-level {
	flex: 1
}

.form-item1 radio {
	transform: scale(0.8);
}

.applytj {
	width: 100%;
}

.applytj .f1 {
	color: #000;
	font-size: 30rpx;
	height: 60rpx;
	line-height: 60rpx;
	font-size: 30rpx;
	padding-left: 20rpx;
	display: flex;
	align-items: center
}

.applytj .f1 .t2 {
	padding-left: 10rpx
}

.applytj .f2 {
	padding: 20rpx;
	background-color: #fff;
	color: #f56060
}

.applytj .f2 .t2 {
	padding-top: 10rpx;
	color: #88e
}

.applytj .f2 .t3 {
	padding-top: 10rpx
}

.applytj .f2 .t4 {
	padding-top: 10rpx;
	color: #ffc600;
	font-size: 30rpx
}

.uplvtj {
	width: 100%;
	margin-top: 20rpx;
}

.uplvtj .f1 {
	color: #000;
	font-size: 30rpx;
	height: 60rpx;
	line-height: 60rpx;
	font-size: 30rpx;
	padding-left: 20rpx;
	display: flex;
	align-items: center
}

.uplvtj .f1 .t2 {
	padding-left: 10rpx
}

.uplvtj .f2 {
	padding: 20rpx;
	background-color: #fff;
	color: #f56060
}

.uplvtj .f2 .t3 {
	padding-top: 10rpx;
	color: #ffc600
}

.explain {
	width: 100%;
	margin: 20rpx 0;
}

.explain .f1 {
	color: #000;
	font-size: 30rpx;
	height: 60rpx;
	line-height: 60rpx;
	font-size: 30rpx;
	padding-left: 20rpx;
	display: flex;
	align-items: center
}

.explain .f1 .t2 {
	padding-left: 10rpx
}

.explain .f2 {
	padding: 20rpx;
	background-color: #fff;
	color: #999999
}


.applydata {
	width: 100%;
	background: #fff;
	padding: 0 20rpx;
	color: #333
}

.form-btn {
	width: 86%;
	height: 88rpx;
	line-height: 88rpx;
	border-radius: 48rpx;
	color: #fff;
	margin-top: 40rpx;
	margin-bottom: 20rpx;
}

.applydata .radio {
	transform: scale(.7);
}

.applydata .checkbox {
	transform: scale(.7);
}

.form-item {
	width: 100%;
	border: 1px #d3d8d8 solid;
	padding: 10rpx 0px;
	display: flex;
	align-items: center;
	margin: 16rpx 0rpx;
	padding-left: 12rpx;
}

.form-item:last-child {
	/*border: 0*/
}

.form-item .label {
	height: 70rpx;
	line-height: 70rpx;
	width: 160rpx;
	margin-right: 10px;
	flex-shrink: 0
}

.form-item .input {
	height: 70rpx;
	line-height: 70rpx;
	overflow: hidden;
	flex: 1;
	padding: 0 8rpx;
	border-radius: 2px;
}

.form-item .textarea {
	height: 180rpx;
	line-height: 40rpx;
	overflow: hidden;
	flex: 1;
	border-radius: 2px;
	padding: 8rpx
}

.form-item .radio {
	height: 70rpx;
	line-height: 70rpx;
	display: flex;
	align-items: center
}

.form-item .radio2 {
	display: flex;
	align-items: center;
}

.form-item .radio .myradio {
	margin-right: 10rpx;
	display: inline-block;
	border: 1px solid #aaa;
	background: #fff;
	height: 32rpx;
	width: 32rpx;
	border-radius: 50%
}

.form-item .checkbox {
	height: 70rpx;
	line-height: 70rpx;
	display: flex;
	align-items: center
}

.form-item .checkbox2 {
	display: flex;
	align-items: center;
	height: 40rpx;
	line-height: 40rpx;
}

.form-item .checkbox .mycheckbox {
	margin-right: 10rpx;
	display: inline-block;
	border: 1px solid #aaa;
	background: #fff;
	height: 32rpx;
	width: 32rpx;
	border-radius: 2px
}

.form-item .layui-form-switch {}

.form-item .picker {
	height: 70rpx;
	line-height: 70rpx;
	flex: 1;
}

.form-imgbox {
	margin-right: 16rpx;
	margin-bottom: 10rpx;
	font-size: 24rpx;
	position: relative;
}

.form-imgbox-close {
	position: absolute;
	display: block;
	width: 32rpx;
	height: 32rpx;
	right: -16rpx;
	top: -16rpx;
	color: #999;
	font-size: 32rpx;
	background: #fff
}

.form-imgbox-close .image {
	width: 100%;
	height: 100%
}

.form-imgbox-img {
	display: block;
	width: 180rpx;
	height: 180rpx;
	padding: 2px;
	border: #d3d3d3 1px solid;
	background-color: #f6f6f6;
	overflow: hidden
}

.form-imgbox-img>.image {
	max-width: 100%;
}

.form-imgbox-repeat {
	position: absolute;
	display: block;
	width: 32rpx;
	height: 32rpx;
	line-height: 28rpx;
	right: 2px;
	bottom: 2px;
	color: #999;
	font-size: 30rpx;
	background: #fff
}

.form-uploadbtn {
	position: relative;
	height: 180rpx;
	width: 180rpx
}

.apply_code {
	float: right;
	width: 100rpx;
	line-height: 60rpx;
	border-radius: 60rpx;
	text-align: center;
	color: #fff;
}

.curlevel_tag {
	color: #b4b4b4;
	font-size: 24rpx;
}

.gradeitem {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex: 1;
}

.form-item .gradeitem .picker {
	height: 70rpx;
	line-height: 70rpx;
	flex: unset;
}

.hui {
	color: #BBBBBB;
}

.member-info {
	display: flex;
	padding: 80rpx 0rpx 0rpx 20rpx;
}

.member-info .title {
	margin-left: 32rpx;
}

.member-avatar image {
	width: 120rpx;
	height: 120rpx;
	border-radius: 50%;
}

.tips {
	text-align: center;
	font-size: 24rpx;
	color: #999;
	margin-bottom: 60rpx;
}

.apply-title {
	color: #010101;
	font-size: 28rpx;
	font-weight: bold;
	text-align: center;
	margin: 20rpx 0rpx;
}
</style>